<template>
  <div>
    <div>
      <!-- QEMS-Quanta Equipment Monitoring System - [QSMC][BGM-SMT][1F] -->
      <div style="margin-bottom:8px;font-size:32px;text-align:center;">Head保养历史记录</div>
      <el-form ref="form" :inline="true" size="small">
        <el-form-item label="开始时间">
            <el-date-picker
                v-model="searchParams.startMainteTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择保养日期">
            </el-date-picker>
        </el-form-item>          
        <el-form-item label="结束时间">
            <el-date-picker
                v-model="searchParams.endMainteTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择保养日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="HeadSN" prop="sn">
          <el-select v-model="searchParams.sn" placeholder="请选择,可搜索" filterable remote :clearable="true" :loading="loading"
            :remote-method="filterHeadSN">
            <el-option v-for="item in selectList" :key="item.id" :label="item.headSN" :value="item.headSN"></el-option>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page.sync="page" :page-sizes="[10, 20, 30, 50]" :page-size="limit"
              layout="total, sizes, prev, pager, next" :total="count"></el-pagination>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearchHistory">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>    
    <el-table :data="mainteTableData" style="width: 100%" :header-cell-style="headerStyleEvent"
      border>
      <!-- label="Head保养" -->

      <el-table-column prop="mainteType" label="保养类型" width align="center"></el-table-column>
      <el-table-column prop="headSN" label="序列号" width align="center"></el-table-column>
      <!-- 后续再说 headType
        <el-table-column prop="headType" label="head类型" width align="center"></el-table-column> -->
      <el-table-column prop="year" label="年份" width align="center"></el-table-column>
      <el-table-column prop="mainteTypeOfNumInYear" label="月份/季度/年" width align="center"></el-table-column>
      <el-table-column prop="mainteDate" label="保养时间" width align="center"></el-table-column>
      <el-table-column prop="mainteEmpNo" label="保养员工" width align="center"></el-table-column>
      <el-table-column prop="mainteEmpName" label="保养员工姓名" width align="center"></el-table-column>
      <el-table-column prop="headCnt" label="Head使用次数" width align="center"></el-table-column>
      <el-table-column prop="mainteMark" label="备注信息" width align="center"></el-table-column>
      <el-table-column label="AHC详情" width align="center">
        <template slot-scope="{row}">
          <el-popover width="1120" trigger="click">
            <el-table :data="row.ahcData_FlowResult" max-height="500">
              <el-table-column property="dateTime" label="Date/Time"></el-table-column>
              <el-table-column property="originalAirFlow" width="180"
                label="Original Air Flow(L/min)"></el-table-column>
              <el-table-column property="cleaningType" label="Cleaning Type"></el-table-column>
              <el-table-column property="nozzleNo" label="Nozzle No"></el-table-column>
              <el-table-column property="airFlowValue" width="170" label="Air Flow Value(L/min)"></el-table-column>
              <el-table-column property="airFlowResult" label="Air Flow Result"></el-table-column>
              <el-table-column property="lowerLimit" label="Lower Limit(L/min)"></el-table-column>
            </el-table>
            <el-link type="primary" slot="reference">FlowResult</el-link>
          </el-popover>
          <br>
          <el-popover width="1120" trigger="click">
            <el-table :data="row.ahcData_PressResult" max-height="500">
              <el-table-column property="dateTime" label="Date/Time"></el-table-column>
              <el-table-column property="nozzleNo" label="Nozzle No"></el-table-column>
              <el-table-column property="pressureValue" width="160" label="Pressure Value(kPa)"></el-table-column>
              <el-table-column property="pressureResult" width="80" label="Pressure Result"></el-table-column>
              <el-table-column property="threshold" label="Threshold(kPa)"></el-table-column>
              <el-table-column property="zAxisMoveResult" width="106" label="Z Axis Move Result"></el-table-column>
              <el-table-column property="rAxisMoveResult" width="106" label="R Axis Move Result"></el-table-column>
              <el-table-column property="qAxisMoveResult" width="106" label="Q Axis Move Result"></el-table-column>
              <el-table-column property="originalAirPressure" width="196"
                label="Original Air Pressure(kPa)"></el-table-column>
            </el-table>
            <el-link type="primary" slot="reference">PressResult</el-link>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
        <pagination :page.sync="searchParams.page" :limit.sync="searchParams.limit" :total="total"
            @pagination="handleSearchHistory">
        </pagination>
  </div>
</template>
<script>

import { getHeadSNSearch, getYearSelect } from '@/network/headSN'
import { getHeadMaintainHistory,getSnExists } from '@/network/headMaintain'
import Pagination from '@/components/Pagination.vue';
export default {
  name: 'maintain',
  props: {},
  components: {
      Pagination
  },
  data() {
    return {
      mainteTableData: [],
      total: 0,
      searchParams: {
          limit: 10,
          page: 1,
          startMainteTime:null,
          endMainteTime:null,
          mainteUser:null,
          sn:null
      },
      selectList: [],
      page: 1,
      limit: 20,
      count: 0,
      //搜索loading
      loading: false,
      yearList: [],
      editDialogProps: {},
      showMessage: false
    }
  },
  mounted() {
    this.getHeadSNSelectData()
    this.getYearSelectData()

    this.handleSearchHistory()
  },

  methods: {
    serachHandleSearchHistory(){
        this.searchParams.page = 1;

        this.handleSearchHistory();
    },
    async handleSearchHistory() {
      try {
        const res = (await getHeadMaintainHistory(this.searchParams))
        this.mainteTableData = res.data
        this.searchParams.page = res.page
        this.searchParams.limit = res.limit
        this.total = res.total||0
      } catch (error) {
        console.log(error);
      }
    },
    async getHeadSNSelectData() {
      try {
        // const res = await getHeadSNSelect({ page: this.page, limit: this.limit })
        const res = await getHeadSNSearch({ page: this.page, limit: this.limit })
        this.selectList = res.data
        this.count = res.count
      } catch (error) {
        console.log(error);
      }
    },
    //下拉框搜索
    filterHeadSN(query) {
      this.loading = true
      this.searchParams.sn = query
      setTimeout(() => {
        this.loading = false
        this.searchHeadSN()
      }, 200);
    },
    async searchHeadSN() {
      try {
        const res = await getHeadSNSearch({ fuzzySNPart: this.searchParams.sn, page: this.page, limit: this.limit })
        this.count = res.count
        this.page = res.page
        this.limit = res.limit
        this.selectList = res.data
      } catch (error) {
        console.log(error);
      }
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getHeadSNSelectData()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getHeadSNSelectData()
    },
    async getYearSelectData() {
      try {
        const res = await getYearSelect()
        let obj = {};
        for (let key in res.data) {
          obj[key] = res.data[key];
        };
        this.yearList = Object.keys(obj).map(val => ({
          label: obj[val],
          value: val,
        }));
      } catch (error) {
        console.log(error);
      }
    },
    codeFind(code) {
      console.log(code + '扫描成功');
      let codes = code + ""
      this.headDialogProps.headSN = encodeURIComponent(codes)
      this.isSnExisit()
    },
    async isSnExisit() {
      try {
        const res = await getSnExists({ headSN: this.headDialogProps.headSN })
        if (res.data) {
          this.showMessage = false
          this.$router.push({
            path: `/spa/headMaintainRecordScan`,
            query: {
              headSN: this.headDialogProps.headSN,
            }
          })
        } else {
          this.showMessage = true
        }
      } catch (error) {
        console.log(error);
      }
    },
    headerStyleEvent() {
      return { background: '#eef1f6', color: '#606266' }
    },
  }
}
</script>
<style scoped>
.title {
  background-color: #2f2e2e;
  color: white;
  font-size: 23px;
  line-height: 40px;
  height: 40px;
}

.HeadSN {
  margin: 10px;
  font-weight: 500;
}

.button {
  margin-bottom: 10px;
}

.message {
  color: red;
}

.tishi {
  margin: 10px;
}
</style>